<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 贵州四季康养文旅</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tdesign-icons-vue-next/dist/index.min.css">
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f0f2f5;
            color: #333;
            overflow-x: hidden;
        }
        .profile-header {
            background-image: linear-gradient(135deg, #0052d9, #6094fc);
            color: white;
            border-radius: 0 0 24px 24px;
            padding: 20px;
            position: relative;
        }
        .profile-actions {
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
        }
        .profile-action-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 10px;
        }
        .avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            border: 3px solid rgba(255, 255, 255, 0.3);
            overflow: hidden;
        }
        .info-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            margin-bottom: 16px;
        }
        .order-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 20%;
        }
        .order-icon {
            width: 28px;
            height: 28px;
            font-size: 20px;
            margin-bottom: 8px;
            color: #0052d9;
        }
        .grid-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 16px 0;
        }
        .grid-icon {
            width: 48px;
            height: 48px;
            background-color: #f5f7fa;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
            color: #0052d9;
            font-size: 24px;
        }
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;
            border-bottom: 1px solid #f5f5f5;
        }
        .divider {
            height: 1px;
            background-color: #f0f0f0;
            margin: 12px 0;
        }
        .badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background-color: #ff4d4f;
            color: white;
            font-size: 10px;
            border-radius: 10px;
            padding: 0 5px;
            min-width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .merchant-banner {
            background-image: linear-gradient(135deg, #7232bd, #c246e0);
            color: white;
            border-radius: 12px;
            padding: 16px;
            display: flex;
            align-items: center;
            margin-bottom: 16px;
        }
        .bottom-nav {
            border-top: 1px solid #eee;
            background: white;
            padding: 8px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: space-around;
        }
        .bottom-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            color: #666;
        }
        .bottom-nav-item.active {
            color: #0052d9;
        }
        .points-card {
            background-image: linear-gradient(135deg, #ff9500, #ff5e00);
            color: white;
            border-radius: 12px;
            padding: 16px;
            position: relative;
            overflow: hidden;
        }
        .points-card::before {
            content: '';
            position: absolute;
            right: -20px;
            top: -20px;
            width: 140px;
            height: 140px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }
        .cart-badge {
            position: absolute;
            top: -5px;
            right: 0;
            background-color: #ff4d4f;
            color: white;
            font-size: 10px;
            border-radius: 10px;
            padding: 0 5px;
            min-width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .user-info-item {
            display: flex;
            align-items: center;
            padding: 8px 0;
        }
        .user-info-item i {
            margin-right: 8px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="pb-16"> <!-- 底部导航栏的空间 -->
        <!-- 个人资料顶部 -->
        <div class="profile-header">
            <div class="profile-actions">
                <div class="profile-action-btn">
                    <i class="t-icon t-icon-scan"></i>
                </div>
                <a href="../settings/settings.html" class="profile-action-btn">
                    <i class="t-icon t-icon-setting"></i>
                </a>
            </div>
            
            <div class="flex items-center">
                <div class="avatar mr-4">
                    <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="用户头像" class="w-full h-full object-cover">
                </div>
                <div>
                    <h2 class="text-xl font-bold">张小花</h2>
                    <p class="text-sm opacity-80 mt-1">贵州省贵阳市</p>
                    <div class="flex items-center mt-2">
                        <span class="text-sm bg-white bg-opacity-20 px-2 py-1 rounded-full">会员等级：黄金</span>
                        <div class="w-px h-3 bg-white bg-opacity-30 mx-2"></div>
                        <span class="text-sm">积分：2,860</span>
                    </div>
                </div>
            </div>
            
            <!-- 用户信息补充 -->
            <div class="mt-4 pt-4 border-t border-white border-opacity-20">
                <div class="flex justify-between">
                    <div class="user-info-item">
                        <i class="t-icon t-icon-mobile"></i>
                        <span class="text-sm">手机：150****8888</span>
                    </div>
                    <div class="user-info-item">
                        <i class="t-icon t-icon-location"></i>
                        <span class="text-sm">已绑定收货地址</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 我的订单 -->
        <div class="px-4 -mt-6">
            <div class="info-card">
                <div class="card-header">
                    <h3 class="font-bold">我的订单</h3>
                    <div class="flex items-center text-gray-500 text-sm">
                        <span>全部订单</span>
                        <i class="t-icon t-icon-chevron-right ml-1"></i>
                    </div>
                </div>
                
                <div class="flex justify-around py-4">
                    <div class="order-item">
                        <div class="relative">
                            <i class="t-icon t-icon-wallet order-icon"></i>
                            <span class="badge">2</span>
                        </div>
                        <span class="text-xs">待付款</span>
                    </div>
                    
                    <div class="order-item">
                        <div class="relative">
                            <i class="t-icon t-icon-shop order-icon"></i>
                            <span class="badge">1</span>
                        </div>
                        <span class="text-xs">待发货</span>
                    </div>
                    
                    <div class="order-item">
                        <div class="relative">
                            <i class="t-icon t-icon-deliver order-icon"></i>
                        </div>
                        <span class="text-xs">待收货</span>
                    </div>
                    
                    <div class="order-item">
                        <div class="relative">
                            <i class="t-icon t-icon-comment order-icon"></i>
                        </div>
                        <span class="text-xs">待评价</span>
                    </div>
                    
                    <div class="order-item">
                        <div class="relative">
                            <i class="t-icon t-icon-service order-icon"></i>
                        </div>
                        <span class="text-xs">退款/售后</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 购物车与商城入口 -->
        <div class="px-4 mt-4">
            <div class="flex gap-4">
                <div class="info-card flex-1">
                    <div class="p-4 flex items-center">
                        <div class="mr-3 relative">
                            <i class="t-icon t-icon-cart text-2xl text-blue-600"></i>
                            <span class="cart-badge">3</span>
                        </div>
                        <div class="flex-1">
                            <h3 class="font-bold">购物车</h3>
                            <p class="text-xs text-gray-500 mt-1">3件商品待结算</p>
                        </div>
                        <i class="t-icon t-icon-chevron-right text-gray-400"></i>
                    </div>
                </div>
                
                <div class="info-card flex-1">
                    <div class="p-4 flex items-center">
                        <div class="mr-3">
                            <i class="t-icon t-icon-shop text-2xl text-green-600"></i>
                        </div>
                        <div class="flex-1">
                            <h3 class="font-bold">商城</h3>
                            <p class="text-xs text-gray-500 mt-1">文旅特产好物</p>
                        </div>
                        <i class="t-icon t-icon-chevron-right text-gray-400"></i>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 我的积分 -->
        <div class="px-4 mt-4">
            <div class="points-card">
                <div class="flex justify-between items-center">
                    <div>
                        <h3 class="font-bold text-lg">我的积分</h3>
                        <div class="flex items-baseline mt-2">
                            <span class="text-3xl font-bold">2,860</span>
                            <span class="text-sm ml-2 opacity-80">本月新增：+210</span>
                        </div>
                    </div>
                    <button class="bg-white text-orange-500 px-4 py-2 rounded-full text-sm font-medium">
                        积分兑换
                    </button>
                </div>
                <div class="flex mt-3 -mx-2">
                    <div class="flex-1 px-2">
                        <div class="bg-white bg-opacity-20 rounded-lg p-2 text-center">
                            <div class="text-sm opacity-80">等级</div>
                            <div class="font-bold">黄金</div>
                        </div>
                    </div>
                    <div class="flex-1 px-2">
                        <div class="bg-white bg-opacity-20 rounded-lg p-2 text-center">
                            <div class="text-sm opacity-80">即将过期</div>
                            <div class="font-bold">120</div>
                        </div>
                    </div>
                    <div class="flex-1 px-2">
                        <div class="bg-white bg-opacity-20 rounded-lg p-2 text-center">
                            <div class="text-sm opacity-80">积分明细</div>
                            <div class="font-bold"><i class="t-icon t-icon-chevron-right"></i></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 商家入驻 -->
        <div class="px-4 mt-4">
            <div class="merchant-banner">
                <div class="flex-1">
                    <h3 class="font-bold text-lg mb-1">开店入驻</h3>
                    <p class="text-sm opacity-80">轻松开店，共享贵州文旅流量红利</p>
                </div>
                <button class="bg-white text-purple-700 px-4 py-2 rounded-full text-sm font-medium">立即开店</button>
            </div>
        </div>
        
        <!-- 我的服务 -->
        <div class="px-4">
            <div class="info-card">
                <div class="card-header">
                    <h3 class="font-bold">我的服务</h3>
                </div>
                
                <div class="grid grid-cols-4 p-2">
                    <div class="grid-item">
                        <div class="grid-icon">
                            <i class="t-icon t-icon-heart"></i>
                        </div>
                        <span class="text-xs">我的收藏</span>
                    </div>
                    
                    <div class="grid-item">
                        <div class="grid-icon">
                            <i class="t-icon t-icon-location"></i>
                        </div>
                        <span class="text-xs">收货地址</span>
                    </div>
                    
                    <div class="grid-item">
                        <div class="grid-icon">
                            <i class="t-icon t-icon-customer-service"></i>
                        </div>
                        <span class="text-xs">客户服务</span>
                    </div>
                    
                    <div class="grid-item">
                        <div class="grid-icon">
                            <i class="t-icon t-icon-discount"></i>
                        </div>
                        <span class="text-xs">优惠券</span>
                    </div>
                    
                    <div class="grid-item">
                        <div class="grid-icon">
                            <i class="t-icon t-icon-ticket"></i>
                        </div>
                        <span class="text-xs">景点门票</span>
                    </div>
                    
                    <div class="grid-item">
                        <div class="grid-icon">
                            <i class="t-icon t-icon-home"></i>
                        </div>
                        <span class="text-xs">酒店订单</span>
                    </div>
                    
                    <div class="grid-item">
                        <div class="grid-icon">
                            <i class="t-icon t-icon-flag"></i>
                        </div>
                        <span class="text-xs">志愿服务</span>
                    </div>
                    
                    <div class="grid-item">
                        <div class="grid-icon">
                            <i class="t-icon t-icon-more"></i>
                        </div>
                        <span class="text-xs">更多</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 我的志愿服务 -->
        <div class="px-4 mt-4">
            <div class="info-card">
                <div class="card-header">
                    <h3 class="font-bold">我的志愿服务</h3>
                    <div class="flex items-center text-gray-500 text-sm">
                        <span>全部</span>
                        <i class="t-icon t-icon-chevron-right ml-1"></i>
                    </div>
                </div>
                
                <div class="p-4">
                    <div class="flex items-center justify-between">
                        <div>
                            <h4 class="font-medium">志愿者积分</h4>
                            <div class="flex items-center mt-1">
                                <span class="text-2xl font-bold text-blue-600">685</span>
                                <span class="text-xs text-gray-500 ml-2">本月新增：+85</span>
                            </div>
                        </div>
                        <button class="bg-blue-600 text-white px-3 py-1 rounded-full text-sm">积分兑换</button>
                    </div>
                    
                    <div class="divider"></div>
                    
                    <div class="mt-2">
                        <h4 class="font-medium mb-3">近期活动</h4>
                        
                        <div class="bg-gray-50 rounded-lg p-3 mb-3">
                            <div class="flex justify-between">
                                <h5 class="font-medium">黄果树景区环保志愿服务</h5>
                                <span class="text-xs text-green-600">已完成</span>
                            </div>
                            <p class="text-xs text-gray-500 mt-1">参与时间：2023-07-15 09:00-12:00</p>
                            <div class="flex justify-between items-center mt-2">
                                <span class="text-xs text-gray-500">获得积分：+45</span>
                                <button class="text-blue-600 text-xs">查看详情</button>
                            </div>
                        </div>
                        
                        <div class="bg-gray-50 rounded-lg p-3">
                            <div class="flex justify-between">
                                <h5 class="font-medium">青岩古镇导游志愿服务</h5>
                                <span class="text-xs text-blue-600">进行中</span>
                            </div>
                            <p class="text-xs text-gray-500 mt-1">参与时间：2023-08-05 13:00-17:00</p>
                            <div class="flex justify-between items-center mt-2">
                                <span class="text-xs text-gray-500">预计积分：+60</span>
                                <button class="text-blue-600 text-xs">查看详情</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 账户安全 -->
        <div class="px-4 mt-4 mb-4">
            <div class="info-card">
                <div class="p-4">
                    <a href="../settings/account_security.html" class="flex justify-between items-center">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                                <i class="t-icon t-icon-secured text-blue-600"></i>
                            </div>
                            <div>
                                <h4 class="font-medium">账户安全</h4>
                                <p class="text-xs text-gray-500 mt-1">保障账户安全，定期修改密码</p>
                            </div>
                        </div>
                        <i class="t-icon t-icon-chevron-right text-gray-400"></i>
                    </a>
                    
                    <div class="divider"></div>
                    
                    <div class="flex justify-between items-center">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
                                <i class="t-icon t-icon-help-circle text-green-600"></i>
                            </div>
                            <div>
                                <h4 class="font-medium">帮助与反馈</h4>
                                <p class="text-xs text-gray-500 mt-1">常见问题解答，意见反馈</p>
                            </div>
                        </div>
                        <i class="t-icon t-icon-chevron-right text-gray-400"></i>
                    </div>
                    
                    <div class="divider"></div>
                    
                    <div class="flex justify-between items-center">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center mr-3">
                                <i class="t-icon t-icon-info-circle text-orange-600"></i>
                            </div>
                            <div>
                                <h4 class="font-medium">关于我们</h4>
                                <p class="text-xs text-gray-500 mt-1">贵州四季康养文旅小程序 v1.0.0</p>
                            </div>
                        </div>
                        <i class="t-icon t-icon-chevron-right text-gray-400"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="bottom-nav-item">
            <i class="t-icon t-icon-home"></i>
            <span>首页</span>
        </div>        
        <div class="bottom-nav-item">
            <i class="t-icon t-icon-browse"></i>
            <span>发现</span>
        </div>

        <div class="bottom-nav-item">
            <i class="t-icon t-icon-chat"></i>
            <span>消息</span>
        </div>
        <div class="bottom-nav-item active">
            <i class="t-icon t-icon-user"></i>
            <span>我的</span>
        </div>
    </div>
</body>
</html> 